<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识vue</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 当你引入vue，全局就会多一个叫Vue的构造函数 -->

    <!-- 你引入了后进入控制台的console，有两个提示,解决方案在vue.txt里面 -->
    <!-- 一个是建议你安装vue的开发者工具 ，解决方案安装开发者工具-->
    <!-- 一个是说你用的是开发者包(如果你用的开发者版)，有点大，上线要换成生产的包 -->

    <!-- 准备好一个容器 -->
    <!-- 容器一般用id，类名之类也是可以的 -->
    <!-- 容器里面的代码依旧符合html规范，只不过混入一些特殊的VUE语法 -->
    <!-- 容器里面的代码一般被称为VUE模板 -->
    <div id="root">
         <!-- {{}}里面只能写js表达式 -->
        <h1>我是{{name}}，{{1+1}}，{{Date.now()}}</h1>
    </div>
<!-- 假如你用类名命名了两个名字一样的容器，vue实例的el填的.类名，那么只有第一个才被当成容器解析 -->
<!-- 一个容器对应多个vue实例会报错 -->
<!-- 一个页面可以有多个容器和实例，但是必须一一对应 -->
</body>
<script>
    Vue.config.productionTip = false;
    // 创建一个Vue实例  
    const vm = new Vue({
        // el是element的缩写，el把vue实例和容器关联起来，值通常为css选择器字符串，还可以这么写el:document.getElementById("root")
        el:'#root',
        // data中用于储存数据，数据供el指定的容器去使用，data的值我们暂时写成一个对象，在组件中要写成函数
        data:{
            name:'张傲'
        }
    })
</script>
</html>